<template>
    <div>
        <div class="mg-content">
             <el-row :gutter="20">
                <el-col :span="6">
                    <div>
                    <el-input v-model="input"  size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入门店名称" :maxlength="20">
                        <template slot="prepend">门店名称</template>
                    </el-input>
                    </div>
                    <!-- <el-input  v-model="input"  size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入门店名称" :maxlength="20"></el-input> -->
                </el-col>
                <el-col :span="6">
                    <div class="el-input el-input-group el-input-group--prepend">
                        <div class="el-input-group__prepend">属性</div>
                        <el-select v-model="propType" filterable placeholder="请选择属性" size="medium" class="w-100p">
                        <el-option
                            v-for="item in propTypes"
                            :key="item.key"
                            :label="item.text"
                            :value="item.key">
                        </el-option>
                        </el-select>
                    </div>
                    <!-- <div  class="text-left">
                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                        <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                    </div> -->
                </el-col>
                <el-col :span="6">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                      <div class="el-input-group__prepend" tabindex="-1">所属区域</div>
                      <el-cascader placeholder="请选择上级机构" class="el-cascader-margin w-100p"  size="medium"
                                   :options="treeData"
                                   :show-all-levels="false" v-model="districtId"
                                   change-on-select>
                      </el-cascader>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div  class="text-left">
                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                        <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                    </div>
                </el-col>
            </el-row>

          <div class="title-buttons">

            <!--<router-link to="/shopsManagement/add"  v-hasPermission="'management_branch:create'">
              <el-button  class="title-button btn-primary" icon="el-icon-plus" size="medium">新建&nbsp;</el-button>
            </router-link>-->
            <el-button  @click="router.push({path:'/shopsManagement/add'})" v-hasPermission="'management_branch:create'" class="title-button btn-primary" icon="el-icon-plus" size="medium">新建&nbsp;</el-button>
            <el-button v-hasPermission="'management_branch:relevance'" class="title-button btn-primary"  size="medium" @click="relatingShow=true;activityId=''" icon="el-icon-plus">关联门店&nbsp;</el-button>
            <el-button v-hasPermission="'management_branch:unRelevance'" class="title-button btn-primary" style="margin-left: 0px" size="medium" @click="remove=true" icon="el-icon-plus">解绑门店&nbsp;</el-button>
          </div>
             <el-row :gutter="20">
                <!--<el-col :span="4">-->
                    <!--<div class="me_title"  >原料分类</div>-->
                    <!--<el-tree :data="treeData"  :props="defaultProps" style="height:400px;overflow-y:auto" :highlight-current="true" :expand-on-click-node="true" :default-expand-all="true" @node-click="handleNodeClick"></el-tree>-->
                <!--</el-col>-->
                <el-col :span="24">
                <el-table
                     v-loading="loading"
                     :data="tableData"
                     :border="true"
                     style="width: 100%">
                    <el-table-column
                       type="index"
                       width="50">
                     </el-table-column>
                    <el-table-column
                            label="门店名称">
                        <template  slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="联系人">
                        <template  slot-scope="scope">
                            <span>{{scope.row.linker}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="手机号">
                        <template  slot-scope="scope">
                            <span>{{scope.row.phone}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="账号">
                        <template  slot-scope="scope">
                            <span>{{scope.row.username}}</span>
                        </template>
                    </el-table-column>
                  <el-table-column
                    label="业态">
                    <template  slot-scope="scope">
                      <span>{{scope.row.industry}}</span>
                    </template>
                  </el-table-column>
                    <el-table-column
                            label="所属区域">
                        <template  slot-scope="scope">
                            <span>{{scope.row.districtName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="经营方式">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.propType">{{scope.row.propType.text}}</span>
                        </template>
                    </el-table-column>
                  <el-table-column
                    label="状态">
                    <template  slot-scope="scope">
                      <span v-if="scope.row.state">{{scope.row.state.text}}</span>
                    </template>
                  </el-table-column>
                    <!--<el-table-column
                            label="操作人">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.operatorName">{{scope.row.operatorName}}</span>
                          <span v-else>&#45;&#45;&#45;&#45;</span>
                        </template>
                    </el-table-column>-->
                    <el-table-column
                            label="创建时间">
                        <template  slot-scope="scope">
                            <span>{{scope.row.createAt}}</span>
                        </template>
                    </el-table-column>

                  <!--  <el-table-column
                            label="使用模板">
                        <template  slot-scope="scope">
                            <span>{{scope.row.templateName}}</span>
                        </template>
                    </el-table-column>-->
                     <!--<el-table-column-->
                             <!--label="查看" width="70">-->
                         <!--<template  slot-scope="scope">-->
                             <!--<router-link :to="'/materialCategorys/materials/show?id='+scope.row.id">-->
                                 <!--<span class="icon icon-chakanmingxi table-icon"></span>-->
                             <!--</router-link>-->
                         <!--</template>-->
                     <!--</el-table-column>-->
                  <!--   <el-table-column
                             label="修改" width="70">
                         <template  slot-scope="scope">
                                &lt;!&ndash;<span class="icon icon-xiugai-copy table-icon" @click="addShow=true;activityId=scope.row.id"></span>&ndash;&gt;
                                <span class="icon icon-xiugai-copy table-icon" @click="goUpdate(scope.row.id)"></span>
                         </template>
                     </el-table-column>-->

                  <el-table-column
                    label="操作" width="200">
                    <template scope="scope" >
                      <el-button v-hasPermission="'management_branch:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,2)" v-if="scope.row.state && scope.row.state.key=='DISABLED'" >启用 | </el-button>
                      <el-button v-hasPermission="'management_branch:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,1)" v-if="scope.row.state && scope.row.state.key=='NORMAL'" >停用 | </el-button>&nbsp;
                      <el-button v-hasPermission="'management_branch:update'" type="text" size="small" style="margin: 0px;" @click="goUpdate(scope.row.id)">修改</el-button>
                    </template>
                  </el-table-column>
                     <!--<el-table-column-->
                              <!--label="删除" width="70">-->
                          <!--<template  slot-scope="scope">-->
                            <!--<span class="icon icon-delete table-icon" @click="handleDelete(scope.$index,scope.$index,scope.row.id)"></span>-->
                          <!--</template>-->
                     <!--</el-table-column>-->
                </el-table>
                </el-col>
            </el-row>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
        <relating :isShow="relatingShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></relating>
        <remove :isShow="remove" :id="activityId" @close="addClose" @addSuccess="addSuccess"></remove>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
//注意路径
import model from "./model.vue";
import relating from "./relating.vue";
import remove from "./remove.vue"
export default {
  data() {
    return {
      treeData: [],
      propType:"",
      districtId:[],
      defaultProps: {
        children: "children",
        label: function(data) {
          return "[" + data.no + "]" + data.name;
        }
      },
      loading: false,
      tableData: [],
      pageSizes: window.pageSizes, //所有可选择的条数
      pageSize: window.pageSize, //控制一页显示的条数
      total: 10, //总条数
      input: "",
      currentPage: 1,
      inputValue: "",
      dialogIsShow: false,
      addShow: false,
      relatingShow:false,
      activityId: "",
      dialogIsShow: false,
      remove:false,
      curDataRow: null,
      curDataIndex: 0,
      selectItmeIndex: "",
      selectItemDetailsIndex: "",
      selectDelId: "",
      supplier:'',
      suppliers:[],
      propTypes:[],
      propType:""
    };
  },
  components: {
    model,
    relating,
    remove
  },
  created() {
    window.this = this;
    this.initData();
  },
  methods: {
    updateState(id,item){
      var st='停用';
      if(item==1){
        st='停用';
      }else{
        st='启用';
      }
      this.$confirm('确定将状态改为'+st+', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get("organization/branchs/updateState?id="+id).then(data => {
          if(data.success){
            this.$message({
              type: 'success',
              message: '修改成功'
            });
            this.initData();
          }else{
            this.$message({
              type: 'error',
              message: data.message
            });
          }

        })

      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消修改状态'
        // });
      });

    },
    goUpdate(id){
      this.router.push({path:"/shopsManagement/add",query:{id:id}});
    },
    initData() {
      this.currentPage = 1;
      this.getData();
    },
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name;
          newList[i].value = newList[i].id + "";
          if (!newList[i].children || newList[i].children.length == 0) {
            newList[i].children = null;
          } else {
            for (var s = 0; s < newList[i].children.length; s++) {
              newList[i].children[s].label = newList[i].children[s].name;
              newList[i].children[s].value = newList[i].children[s].id + "";
              newList[i].children[s].children = null;
            }
          }
        }
      }
    },
    keyDown(ev) {
      if (ev.keyCode == 13) {
        this.currentPage = 1;
        this.inputValue = this.input;
        this.getData();
      }
    },
    cleanSearch() {
      this.currentPage = 1;
      this.input = "";
      this.districtId=[];
      this.propType="";
      this.inputValue = this.input;
      this.getData();
    },
    search() {
      this.currentPage = 1;
      this.inputValue = this.input;
      var search="";
      if(this.input!=""){
        search="search.name_like="+this.input+"&"+search;
      }
      if(this.propType!=''){
        search="search.propType_eq="+this.propType+"&"+search;
      }
      if(this.districtId.length>0){
        search="search.districtId_eq="+this.districtId[this.districtId.length - 1]+"&"+search;
      }
      this.loading=true;
      this.$axios.get("organization/branchs?"+search).then((data)=>{
        this.loading=false
        this.tableData=data.content.branchPage.content;
        this.total=data.content.branchPage.totalElements;
      }).catch(function(err){
      })
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    getData() {
      // this.loading=true;
      this.$axios
        .get(
          "organization/branchs?page.pn=" +
            this.currentPage +
            "&page.size=" +
            this.pageSize +
            "&search.name_like=" +
            this.inputValue
        )
        .then(data => {
          this.loading = false;
          // this.treeData = data.content.treeData;
          this.tableData = data.content.branchPage.content;
          this.total = data.content.branchPage.totalElements;
          var tree = data.content.districtList;
          this.newLabel(tree);
          this.treeData = tree;
          this.propTypes=data.content.propTypes;
        })
        .catch(function(err) {});
    },
    handleDelete(index, delIndex, id) {
      (this.selectItmeIndex = index), (this.selectItemDetailsIndex = delIndex);
      this.selectDelId = id;
      this.dialogIsShow = true;
    },
    dialogResult(param) {
      this.dialogIsShow = param.close;
      if (param.choose === "ok") {
        //console.log("确定");
        this.$axios
          .delete("organization/branchs/" + this.selectDelId)
          .then(data => {
            if (data.status == 200) {
              this.tableData.splice(this.curDataIndex, 1);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.initData();
            } else {
              this.$message({
                type: "error",
                message: data.message
              });
            }
          });
      } else if (param.choose === "cancel") {
        //console.log("取消");
      } else {
        //console.log("不做处理");
      }
    },

    addSuccess(item) {
      this.relatingShow = false;
      this.addShow = false;
      this.remove = false;
      this.currentPage = 1;
      this.initData();
    },

    addClose() {
      this.addShow = false;
      this.relatingShow = false;
      this.remove = false;
      this.initData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    }
  }
};
</script>
<style scoped>
</style>
